<!--
 * @Description:
 * @Author bianpengfei
 * @create 2022/2/22 22:36
 -->
<template>
  <div class="!p-[12px] m-[auto] bg-[#fff]">
    <g-title class="my-[4px]">组件方式：加载内容 预处理loading</g-title>

    <div class="py-[8px]">
      <el-button @click="size = 'large'">尺寸：large</el-button>
      <el-button @click="size = 'default'">尺寸：default</el-button>
      <el-button @click="size = 'small'">尺寸：small</el-button>
    </div>

    <el-row :gutter="12">
      <el-col :span="4">
        <g-spin :loading="true" :size="size">
          <div class="w-full h-[300px] bg-[#ccc] border shadow"></div>
        </g-spin>
      </el-col>

      <el-col :span="4">
        <g-spin :loading="true" :size="size" type="circular">
          <div class="w-full h-[300px] bg-[#ccc] border shadow"></div>
        </g-spin>
      </el-col>

      <el-col :span="4">
        <g-spin :loading="true" type="circle" :size="size">
          <div class="w-full h-[300px] bg-[#ccc] border shadow"></div>
        </g-spin>
      </el-col>

      <el-col :span="4">
        <g-spin :loading="true" type="rect" :size="size">
          <div class="w-full h-[300px] bg-[#ccc] border shadow"></div>
        </g-spin>
      </el-col>
    </el-row>

    <g-title class="mt-[12px]">指令方式</g-title>

    <el-row :gutter="12">
      <el-col v-spin="{ loading: true, size: size, type: 'circular' }" :span="4">
        <div class="w-full h-[300px] bg-[pink] border shadow"></div>
      </el-col>

      <el-col v-spin="{ loading: true, size: size }" :span="4">
        <div class="w-full h-[300px] bg-[pink] border shadow"></div>
      </el-col>

      <el-col v-spin="{ loading: true, size: size, type: 'circle' }" :span="4">
        <div class="w-full h-[300px] bg-[pink] border shadow"></div>
      </el-col>

      <el-col v-spin="{ loading: true, size: size, type: 'rect' }" :span="4">
        <div class="w-full h-[300px] bg-[pink] border shadow"></div>
      </el-col>

      <el-col v-spin="true" :span="4">
        <div class="w-full h-[300px] bg-[pink] border shadow">简写方式</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 'default'
    }
  }
}
</script>

<style scoped></style>
